<!--
 * @Description: 搜索栏
 * @Author: qingyang
 * @Date: 2022-03-21 14:03:51
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-14 16:32:38
-->

<template>
  <div
    class="body-main__tabs-filter"
    :class="props.isSingleFilterTab ? 'body-main__tabs-filter--single' : ''"
    v-if="localFilterBar"
  >
    <el-tabs v-model="componentSearchForm[localFilterBar?.field]" @tab-click="handleSearchChange">
      <el-tab-pane
        :label="tab.label"
        :name="tab.value"
        v-for="tab in localFilterBar.filterTabList"
        :key="tab.value"
      ></el-tab-pane>
    </el-tabs>
    <SearchBarFixedButtons
      ref="fixedButtonsRef"
      v-model:tableFieldsSetting="localTableFieldsSetting"
      :enableFieldsSetting="props.enableFieldsSetting"
      :is-show-refresh-btn="props.isShowRefreshBtn"
      @refresh="handleRefresh"
    />
  </div>
  <div class="body-main__filter" v-if="!props.isSingleFilterTab">
    <el-space :size="8" wrap>
      <template v-for="(searchBoxItem, searchBoxIndex) in localSearchOptions" :key="searchBoxIndex">
        <SearchBarItem
          :searchBoxItem="searchBoxItem"
          :searchForm="searchForm"
          @change="searchForm => handlePropsSearchChange(searchForm, searchBoxItem)"
        ></SearchBarItem>
      </template>
      <template
        v-for="(searchBoxItem, searchBoxIndex) in localSearchOptionsFolded"
        :key="'folded' + searchBoxIndex"
      >
        <SearchBarItem
          :searchBoxItem="searchBoxItem"
          :searchForm="searchForm"
          @change="searchForm => handlePropsSearchChange(searchForm, searchBoxItem)"
          v-if="isFilterExpanded"
        ></SearchBarItem>
      </template>
      <el-button text class="filter-expand-button" @click="onToggleFilter" v-if="isShowFilterExpand"
        ><CIcon
          class="filter-expand-button__icon"
          :class="isFilterExpanded ? 'filter-expand-button__icon--expanded' : ''"
          type="c-xian-xia"
        ></CIcon>
        {{ isFilterExpanded ? '收起' : '展开' }}</el-button
      >
      <div class="filter-fixed-buttons-placeholder">
        <slot name="placeholder"></slot>
      </div>
    </el-space>
    <SearchBarFixedButtons
      ref="fixedButtonsRef"
      v-model:tableFieldsSetting="localTableFieldsSetting"
      :enableFieldsSetting="props.enableFieldsSetting"
      :is-show-refresh-btn="props.isShowRefreshBtn"
      @refresh="handleRefresh"
    >
      <template #placeholderRight>
        <slot name="placeholderRight"></slot>
      </template>
    </SearchBarFixedButtons>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, defineExpose, reactive, Ref, ref, computed } from 'vue';
import SearchBarItem from './search-bar-item.vue';
import { GIcon } from '@/components/GIcon/index';
import { searchBarProps } from './search-bar';
import type { SearchOptionsType } from './search-bar';
import type { TabsPaneContext } from 'element-plus';
import SearchBarFixedButtons from './search-bar-fixed-buttons.vue';

const props = defineProps(searchBarProps);
const emit = defineEmits(['change', 'refresh', 'update:tableFieldsSetting']);

/**
 * searchForm的映射
 */
const componentSearchForm = reactive(props.searchForm);

/**
 * 一直显示的搜索表单
 */
const localSearchOptions = computed(() => {
  return props.searchOptions.filter(
    n => n.type !== 'filterTab' && n.type !== 'headerTab' && n?.isFold !== true
  );
});

/**
 * 可以展开/收起的搜索表单
 */
const localSearchOptionsFolded = computed(() => {
  return props.searchOptions.filter(
    n => n.type !== 'filterTab' && n.type !== 'headerTab' && n.isFold === true
  );
});

/**
 * tab切换的bar
 */
const localFilterBar = computed(() => {
  return props.searchOptions.filter(n => n.type === 'filterTab')[0];
});

/**
 * 处理搜索改变事件
 */
const handleSearchChange = (pane: TabsPaneContext) => {
  componentSearchForm[localFilterBar.value?.field] = pane.paneName;
  handlePropsSearchChange(componentSearchForm, localFilterBar.value);
};

/**
 * 处理搜索改变事件
 */
const handlePropsSearchChange = (searchForm: any, searchBoxItem: SearchOptionsType) => {
  console.log('handlePropsSearchChange', searchBoxItem);
  if (searchBoxItem?.onSearchFormChange) {
    searchBoxItem.onSearchFormChange(searchForm);
  } else {
    emit('change', searchForm);
  }
};

/**
 * 传递刷新操作
 */
function handleRefresh() {
  emit('refresh');
}

/**
 * 字段设置
 */
const localTableFieldsSetting = computed({
  get() {
    return props.tableFieldsSetting;
  },
  set(val) {
    emit('update:tableFieldsSetting', val);
  }
});

/**
 * 是否已展开
 */
const isFilterExpanded = ref(false);

/**
 * 是否展示展开/收起按钮
 */
const isShowFilterExpand = computed(() => {
  let flag = false;
  for (let i = 0; i < props.searchOptions.length; i++) {
    const item = props.searchOptions[i];
    if (item.isFold) flag = true;
  }
  return flag;
});

/**
 * 展开/收起操作
 */
function onToggleFilter() {
  isFilterExpanded.value = !isFilterExpanded.value;
}
/**
 * searchBarFixedButtons组件的Ref实例
 */
const fixedButtonsRef = ref();
/**
 * 操作searchBarFixedButtons内暴露的方法
 * @param callback
 */
function operationFixedButtons(callback: (fixedButtonsRef: Ref<any>) => void) {
  callback(fixedButtonsRef);
}
defineExpose({
  operationFixedButtons
});
</script>
<style lang="scss" scoped>
@use '../styles/search-bar.scss' as *;
</style>
